/*
 * @Description: 编辑用户信息
 * @Author: kanglin
 * @Date: 2018-05-24 10:14:37
 * @Copyright: Created by Panxsoft.
 */

<style lang="less" rel="stylesheet/less" type="text/less">

   .v-customer-staff-edit {
       .selectBox .ivu-select-dropdown {
           position: fixed !important;
       }
   }

</style>
<template>
	<div class="v-customer-staff-edit">
		<Form
			ref="formValidate"
			:model="formValidate"
			:rules="ruleValidate"
			:label-width="80">

			<Form-item
				:label="$t('template.name')"
				prop="name">
				<i-input
					v-model="formValidate.name"
					:placeholder="$t('template.please_enter_name')"
					type="text"/>
			</Form-item>

			<Form-item
				:label="$t('template.account')"
				prop="account">
				<i-input
					v-model="formValidate.account"
					:placeholder="$t('template.please_enter_account')"
					type="text"/>
			</Form-item>

			<Form-item
				:label="$t('template.password')"
				prop="password">
				<i-input
					v-if="!show_password"
					v-model="formValidate.password"
					:placeholder="$t('template.please_enter_password')"
					type="password"
					icon="eye"
					@on-click="showPassword()"/>
				<i-input
					v-else
					v-model="formValidate.password"
					:placeholder="$t('template.please_enter_password')"
					type="text"
					icon="eye"
					@on-click="showPassword()"/>
			</Form-item>

			<Form-item
				:label="$t('template.email')"
				prop="email">
				<AutoComplete
					v-model="formValidate.email"
					:placeholder="$t('template.please_enter_email')"
					@on-search="handleSearch">
					<Option
						v-for="item in email_suffixs"
						:value="item"
						:key="item">{{ item }}</Option>
				</AutoComplete>
			</Form-item>

			<Form-item
				:label="$t('template.phone')"
				prop="phone">
				<i-input
					v-model="formValidate.phone"
					:placeholder="$t('template.please_enter_phone')"
					type="text"/>
			</Form-item>

			<Form-item
				:label="$t('template.gender')"
				prop="sex">
				<RadioGroup v-model="formValidate.sex">
					<Radio label="1">
						<span>{{ $t('template.male') }}</span>
					</Radio>
					<Radio label="2">
						<span>{{ $t('template.female') }}</span>
					</Radio>
				</RadioGroup>
			</Form-item>

			<!-- <Form-item
				:label="$t('template.born_at')"
				prop="born_at">
				<DatePicker
					:value="formValidate.born_at"
					:placeholder="$t('template.please_select_date')"
					type="date"
					format="yyyy-MM-dd"
					@on-change="changeDate"/>
			</Form-item> -->

			<Form-item
				:label="$t('template.role')"
				prop="role_name"
				class="selectBox">
				<Select
					v-model="formValidate.role_name"
					:placeholder="$t('template.please_select_role')"
					disabled
					clearable
					transfer>
					<Option
						v-for="( staff , key ) in roleIndex"
						:value="staff.name"
						:key="key">{{ staff.name }}</Option>
				</Select>
			</Form-item>

			<Form-item>
				<Button
					type="primary"
					@click="handleSubmit('formValidate')">
					{{ $t('template.submit') }}
				</Button>
			</Form-item>

		</Form>
	</div>
</template>

<script>

import { validatePhone } from 'src/validate';

export default {
	name: 'UserEdit',
	props: {
		userInfo: {
			type: Object,
			required: true,
		},
		roleIndex: {
			type: Array,
			required: true,
		},
		userRoles: {
			type: Array,
			required: true,
		},
	},
	data() {
		const role_name = this.userRoles && this.userRoles.length > 0 ? String(this.userRoles[0].name) : '';
		const sex = String(this.userInfo.sex);
		const password = null;
		const {
			name,
			account,
			email,
			phone,
			born_at,
		} = this.userInfo;
		return {

			email_suffixs: [], // 自动补全email后缀

			formValidate: {
				name, 		// 姓名
				account, 	// 账户
				password, 	// 密码
				email, 		// 邮箱
				phone, 		// 手机
				sex, 		// 性别
				born_at, 	// 出生日期
				role_name, 	// 身份
			},

			show_password: false,

			ruleValidate: { // 表单验证规则
				name: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('template.name') }),
						trigger: 'blur,change',
					},
				],
				account: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('template.account') }),
						trigger: 'blur,change',
					},
				],
				password: [
					{
						type: 'string',
						min: 6,
						message: this.$t('validate.min', { field: this.$t('template.password'), length: 6 }),
						trigger: 'blur,change',
					},
				],
				email: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('template.email') }),
						trigger: 'blur,change',
					},
					{
						type: 'email',
						message: this.$t('validate.email', { field: this.$t('template.email') }), // '邮箱格式不合法',
						trigger: 'blur,change',
					},
				],
				phone: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('template.phone') }),
						trigger: 'blur,change',
					},
					{ validator: validatePhone, trigger: 'blur,change' },
				],
				sex: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('template.gender') }), //  '性别不能为空',
						trigger: 'blur,change',
					},
				],
				// born_at: [
				// 	{ type: 'string', message: '出生日期不能为空', trigger: 'blur,change' },
				// ],
				// role_name: [
				// 	{ message: '角色不能为空', trigger: 'blur,change' },
				// ],
			},

		};
	},

	methods: {
		/**
         * 拼接自动补全的数据
         * @param  {string} value {输入的数据}
         * @return {undefined}
         */
		handleSearch(value) {
			this.email_suffixs = !value || value.indexOf('@') >= 0 ? [] : [
				`${value}@qq.com`,
				`${value}@sina.com`,
				`${value}@163.com`,
				`${value}@163.net`,
				`${value}@gmail.com`,
				`${value}@yahoo.com`,
				`${value}@msn.com`,
				`${value}@hotmail.com`,
				`${value}@aol.com`,
				`${value}@ask.com`,
				`${value}@live.com`,
			];
		},

		/**
         * 账号密码显示与隐藏
         * @return {undefined}
         */
		showPassword() {
			this.show_password = !this.show_password;
		},

		/**
         * 改变日期之后的回调
         * @param  {string} date {格式化后的date}
         * @return {undefined}
         */
		changeDate(date) {
			this.formValidate.born_at = date;
		},

		/**
         * 提交表单
         * @param  {string} name {表单的ref}
         * @return {undefined}
         */
		handleSubmit(name) {
			this.$refs[name].validate((valid) => {
				if (valid) {
					// this.formValidate.born_at = this.real_date;// 时间
					this.$emit('update', { id: this.userInfo.id, form: this.formValidate });
					this.show_password = false;
				} else {
					this.$Message.error(this.$t('common.invalid_form_data'));
				}
			});
		},

	},
};
</script>
